import './UserClass.scss'

// 单纯使用
function PureClass() {
    return(<>
        <div className="box">单纯使用</div>
    </>)
}

// 使用多个class
function MultipleClass() {
    return(<>
        <div className="box red">使用多个class</div>
    </>)
}

// 使用条件class
function ConditionalClass() {
    const isRed = true
    return(<>
        <div className={`box ${isRed ? 'red' : ''}`}>我是红色</div>
        <div className={`box ${!isRed ? 'red' : ''}`}>我不是红色</div>
    </>)
}


function UseClass() {
    return (<>
      <PureClass />
      <MultipleClass />
      <ConditionalClass />
    </>)
}


export default UseClass